<template>
  <div class="inventory-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>新增盘点</h2>
      <el-button type="text" @click="handleBack">返回</el-button>
    </div>

    <!-- 表单区域 -->
    <el-form 
      :model="formData" 
      ref="formRef" 
      :rules="formRules" 
      label-width="80px"
      class="inventory-form"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="盘点编号" prop="inventoryNo">
            <el-input v-model="formData.inventoryNo" placeholder="请输入盘点编号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点仓库" prop="warehouse">
            <el-select v-model="formData.warehouse" placeholder="请选择盘点仓库" clearable>
              <el-option 
                v-for="item in warehouseOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入盘点备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="盘点人" prop="inventoryPerson">
            <el-input v-model="formData.inventoryPerson" placeholder="请输入盘点人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点时间" prop="inventoryTime">
            <el-date-picker 
              v-model="formData.inventoryTime" 
              type="date" 
              placeholder="选择盘点时间" 
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="formData.keyword" placeholder="请输入关键字" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 功能按钮 -->
    <div class="action-buttons">
      <el-button type="primary" class="import-btn">一键导入</el-button>
      <el-button type="primary" class="search-btn" @click="handleSearch">查询</el-button>
    </div>

    <!-- 产品表格 -->
    <el-table 
      :data="productList" 
      border 
      stripe 
      class="product-table"
    >
      <el-table-column prop="productNo" label="产品编号" />
      <el-table-column prop="productName" label="产品名称" />
      <el-table-column prop="brand" label="归属品牌" />
      <el-table-column prop="spec" label="规格" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="retailPrice" label="零售价" />
      <el-table-column prop="discount" label="折扣" />
      <el-table-column prop="discountPrice" label="折扣价" />
      <el-table-column prop="specialPrice" label="特价" />
      <el-table-column prop="seckillPrice" label="秒杀价" />
      <el-table-column prop="warehouse" label="仓库" />
      <el-table-column prop="stock" label="库存" />
      <el-table-column label="盘点数量">
        <template #default="scope">
          <div class="quantity-control">
            <el-button 
              type="text" 
              size="small" 
              @click="decreaseQuantity(scope.row)"
            >
              -
            </el-button>
            <el-input-number 
              v-model="scope.row.inventoryQuantity" 
              :min="0" 
              size="small"
            />
            <el-button 
              type="text" 
              size="small" 
              @click="increaseQuantity(scope.row)"
            >
              +
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="inStockDate" label="入库日期" />
      <el-table-column prop="validDays" label="有效期" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="note" label="备注" />
    </el-table>

    <!-- 底部按钮 -->
    <div class="bottom-buttons">
      <el-button type="primary" @click="handleSubmit">确认提交</el-button>
      <el-button type="success" @click="handleSaveDraft">保存草稿</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 路由实例
const router = useRouter()

// 表单引用
const formRef = ref(null)

// 表单数据
const formData = reactive({
  inventoryNo: '',
  warehouse: '',
  remark: '',
  inventoryPerson: '',
  inventoryTime: '',
  keyword: ''
})

// 表单验证规则
const formRules = {
  inventoryNo: [{ required: true, message: '请输入盘点编号', trigger: 'blur' }],
  warehouse: [{ required: true, message: '请选择盘点仓库', trigger: 'blur' }],
  inventoryPerson: [{ required: true, message: '请输入盘点人', trigger: 'blur' }],
  inventoryTime: [{ required: true, message: '请选择盘点时间', trigger: 'blur' }]
}

// 仓库下拉选项
const warehouseOptions = [
  { label: '1号仓库', value: '1号' },
  { label: '2号仓库', value: '2号' },
  { label: '3号仓库', value: '3号' },
  { label: '4号仓库', value: '4号' }
]

// 产品列表数据
const productList = reactive([
  {
    productNo: '01',
    productName: '丝芙兰',
    brand: '丝芙兰精华',
    spec: '50g',
    type: '单品',
    retailPrice: '¥111.62',
    discount: '单品1.2套装2.9',
    discountPrice: '¥123.98',
    specialPrice: '¥111.32',
    seckillPrice: '¥101.32',
    warehouse: '1号',
    stock: 472,
    inventoryQuantity: 1,
    inStockDate: '2024.09.10',
    validDays: '321天',
    status: '-',
    note: '-'
  },
  {
    productNo: '02',
    productName: '雅诗兰黛',
    brand: '小棕瓶',
    spec: '30ml',
    type: '单品',
    retailPrice: '¥580.00',
    discount: '单品1.0套装2.5',
    discountPrice: '¥580.00',
    specialPrice: '¥520.00',
    seckillPrice: '¥480.00',
    warehouse: '2号',
    stock: 300,
    inventoryQuantity: 1,
    inStockDate: '2024.06.15',
    validDays: '280天',
    status: '-',
    note: '-'
  },
  {
    productNo: '03',
    productName: '兰蔻',
    brand: '粉水',
    spec: '200ml',
    type: '单品',
    retailPrice: '¥380.00',
    discount: '单品1.0套装2.2',
    discountPrice: '¥380.00',
    specialPrice: '¥340.00',
    seckillPrice: '¥300.00',
    warehouse: '3号',
    stock: 500,
    inventoryQuantity: 1,
    inStockDate: '2024.07.20',
    validDays: '300天',
    status: '-',
    note: '-'
  },
  {
    productNo: '04',
    productName: '资生堂',
    brand: '红腰子',
    spec: '50ml',
    type: '单品',
    retailPrice: '¥780.00',
    discount: '单品1.0套装2.8',
    discountPrice: '¥780.00',
    specialPrice: '¥700.00',
    seckillPrice: '¥650.00',
    warehouse: '4号',
    stock: 210,
    inventoryQuantity: 1,
    inStockDate: '2024.08.30',
    validDays: '330天',
    status: '-',
    note: '-'
  }
])

// 减少盘点数量
const decreaseQuantity = (row) => {
  if (row.inventoryQuantity > 0) {
    row.inventoryQuantity--
  }
}

// 增加盘点数量
const increaseQuantity = (row) => {
  row.inventoryQuantity++
}

// 返回按钮
const handleBack = () => {
  router.back()
}

// 查询按钮
const handleSearch = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 这里可以添加查询逻辑
      ElMessage.info('查询功能已触发，可根据关键字等条件筛选产品')
    }
  })
}

// 确认提交
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 这里可以添加提交逻辑
      ElMessage.success('盘点单已提交成功')
      // 提交后可重置表单或跳转页面
      // router.push('/inventory/list')
    }
  })
}

// 保存草稿
const handleSaveDraft = () => {
  ElMessage.success('盘点单已保存为草稿')
}
</script>

<style scoped>
.inventory-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.page-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.inventory-form {
  margin-bottom: 20px;
}

.action-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
}

.import-btn {
  background-color: #00b4b4;
  border-color: #00b4b4;
}

.import-btn:hover {
  background-color: #009a9a;
  border-color: #009a9a;
}

.search-btn {
  background-color: #00b4b4;
  border-color: #00b4b4;
}

.search-btn:hover {
  background-color: #009a9a;
  border-color: #009a9a;
}

.product-table {
  width: 100%;
  margin-bottom: 20px;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-control .el-input-number {
  width: 60px;
  margin: 0 5px;
}

.bottom-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.bottom-buttons .el-button--primary {
  background-color: #00b4b4;
  border-color: #00b4b4;
}

.bottom-buttons .el-button--primary:hover {
  background-color: #009a9a;
  border-color: #009a9a;
}

.bottom-buttons .el-button--success {
  background-color: #67c23a;
  border-color: #67c23a;
}

.bottom-buttons .el-button--success:hover {
  background-color: #5daf34;
  border-color: #5daf34;
}
</style>